<template>
  <div class="select-address form-content">
    <el-select class="w-100" v-model="provinceCode" placeholder="请选择省" @change="changeProvince" clearable filterable>
      <el-option v-for="item in provinceList" :key="item.provinceCode" :label="item.provinceName"
        :value="item.provinceCode">
      </el-option>
    </el-select>
    <el-select class="w-100" v-model="cityCode" placeholder="请选择市" @change="changeCity" clearable filterable>
      <el-option v-for="item in cityList" :key="item.cityCode" :label="item.cityName" :value="item.cityCode">
      </el-option>
    </el-select>
    <el-select class="w-100" v-model="countyCode" placeholder="请选择区/县" @change="getTownsList" clearable filterable>
      <el-option v-for="item in countyList" :key="item.countyCode" :label="item.countyName" :value="item.countyCode">
      </el-option>
    </el-select>
    <el-select class="w-150" v-model="townsCode" placeholder="请选择街道/乡镇" @change="getVillageList" clearable filterable>
      <el-option v-for="item in townsList" :key="item.townsCode" :label="item.townsName" :value="item.townsCode">
      </el-option>
    </el-select>
    <el-select class="w-150" v-model="villageCode" placeholder="请选择村" clearable filterable>
      <el-option v-for="item in villageList" :key="item.villageCode" :label="item.villageName"
        :value="item.villageCode">
      </el-option>
    </el-select>

  </div>
</template>

<script>
import { queryRegion } from '@/api/record';
import { sleep } from '@/utils/index';

export default {
  name: 'AddressSelect',
  props: {
    addressObj: {
      type: Object,
      default: () => { }
    }
  },
  model: {
    prop: "addressObj",
    event: "input"
  },
  data() {
    return {
      _provinceCode: '',
      _provinceName: '',
      _cityCode: '',
      _cityName: '',
      _countyCode: '',
      _countyName: '',
      _townsCode: '',
      _townsName: '',
      _villageCode: '',
      _villageName: '',
      provinceList: [],
      cityList: [],
      countyList: [],
      townsList: [],
      villageList: []
    }
  },
  computed: {
    provinceCode: {
      set(val) {
        this._provinceCode = val;
        this.$emit('input', {
          provinceCode: val,
          provinceName: this.provinceList?.find(item => item.provinceCode == val)?.provinceName ?? '',
          cityCode: this.cityCode,
          cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
          countyCode: this.countyCode,
          countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
          townsCode: this.townsCode,
          townsName: this.townsList?.find(item => item.townsCode == this.townsCode)?.townsName ?? '',
          villageCode: this.villageCode,
          villageName: this.villageList?.find(item => item.villageCode == this.villageCode)?.villageName ?? '',
        });
      },
      get() {
        return this.addressObj.provinceCode || this._provinceCode;
      }
    },
    cityCode: {
      set(val) {
        this._provinceCode = val;
        this.$emit('input', {
          provinceCode: this.provinceCode,
          provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
          cityCode: val,
          cityName: this.cityList?.find(item => item.cityCode == val)?.cityName ?? '',
          countyCode: this.countyCode,
          countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
          townsCode: this.townsCode,
          townsName: this.townsList?.find(item => item.townsCode == this.townsCode)?.townsName ?? '',
          villageCode: this.villageCode,
          villageName: this.villageList?.find(item => item.villageCode == this.villageCode)?.villageName ?? '',
        });
      },
      get() {
        return this.addressObj.cityCode || this._cityCode;
      }
    },
    countyCode: {
      set(val) {
        this._provinceCode = val;
        this.$emit('input', {
          provinceCode: this.provinceCode,
          provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
          cityCode: this.cityCode,
          cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
          countyCode: val,
          countyName: this.countyList?.find(item => item.countyCode == val)?.countyName ?? '',
          townsCode: this.townsCode,
          townsName: this.townsList?.find(item => item.townsCode == this.townsCode)?.townsName ?? '',
          villageCode: this.villageCode,
          villageName: this.villageList?.find(item => item.villageCode == this.villageCode)?.villageName ?? '',
        });
      },
      get() {
        return this.addressObj.countyCode || this._countyCode;
      }
    },
    townsCode: {
      set(val) {
        this._provinceCode = val;
        this.$emit('input', {
          provinceCode: this.provinceCode,
          provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
          cityCode: this.cityCode,
          cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
          countyCode: this.countyCode,
          countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
          townsCode: val,
          townsName: this.townsList?.find(item => item.townsCode == val)?.townsName ?? '',
          villageCode: this.villageCode,
          villageName: this.villageList?.find(item => item.villageCode == this.villageCode)?.villageName ?? '',
        });
      },
      get() {
        return this.addressObj.townsCode || this._townsCode;
      }
    },
    villageCode: {
      set(val) {
        this._provinceCode = val;
        this.$emit('input', {
          provinceCode: this.provinceCode,
          provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
          cityCode: this.cityCode,
          cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
          countyCode: this.countyCode,
          countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
          townsCode: this.townsCode,
          townsName: this.townsList?.find(item => item.townsCode == this.townsCode)?.townsName ?? '',
          villageCode: val,
          villageName: this.villageList?.find(item => item.villageCode == val)?.villageName ?? '',
        });
      },
      get() {
        return this.addressObj.villageCode || this._villageCode;
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getProvinceList()
      this.getCityList()
      this.getCountyList()
      this.getTownsList()
      this.getVillageList()
    },
    async changeProvince() {
      await sleep()
      this._cityCode = '';
      this._countyCode = '';
      this._townsCode = '';
      this._villageCode = '';
      this.$emit('input', {
        provinceCode: this.provinceCode,
        provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
        cityCode: '',
        cityName: '',
        countyCode: '',
        countyName: '',
        townsCode: '',
        townsName: '',
        villageCode: '',
        villageName: ''
      })
      this.getCityList()
    },

    async changeCity() {
      await sleep()
      this._countyCode = '';
      this._townsCode = '';
      this._villageCode = '';
      this.$emit('input', {
        provinceCode: this.provinceCode,
        provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
        cityCode: this.cityCode,
        cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
        countyCode: '',
        countyName: '',
        townsCode: '',
        townsName: '',
        villageCode: '',
        villageName: ''
      })
      this.getCountyList()
    },
    async changeCounty() {
      await sleep()
      this._townsCode = '';
      this._villageCode = '';
      this.$emit('input', {
        provinceCode: this.provinceCode,
        provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
        cityCode: this.cityCode,
        cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
        countyCode: this.countyCode,
        countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
        townsCode: '',
        townsName: '',
        villageCode: '',
        villageName: ''
      })
      this.getTownsList()
    },
    async changeTowns() {
      await sleep()
      this._villageCode = '';
      this.$emit('input', {
        provinceCode: this.provinceCode,
        provinceName: this.provinceList?.find(item => item.provinceCode == this.provinceCode)?.provinceName ?? '',
        cityCode: this.cityCode,
        cityName: this.cityList?.find(item => item.cityCode == this.cityCode)?.cityName ?? '',
        countyCode: this.countyCode,
        countyName: this.countyList?.find(item => item.countyCode == this.countyCode)?.countyName ?? '',
        townsCode: this.townsCode,
        townsName: this.townsList?.find(item => item.townsCode == this.townsCode)?.townsName ?? '',
        villageCode: '',
        villageName: ''
      })
      this.getVillageList()
    },

    async getProvinceList() {
      await this.$nextTick()
      const { data } = await queryRegion()
      this.provinceList = data.filter(e => !!e)
    },

    async getCityList() {
      await this.$nextTick()
      if (!this.provinceCode) return
      const { data } = await queryRegion({
        provinceCode: this.provinceCode
      })
      this.cityList = data.filter(e => !!e)
    },
    async getCountyList() {
      await this.$nextTick()
      if (!this.provinceCode || !this.cityCode) return
      const { data } = await queryRegion({
        provinceCode: this.provinceCode,
        cityCode: this.cityCode
      })
      this.countyList = data.filter(e => !!e)
    },
    async getTownsList() {
      await this.$nextTick()
      if (!this.provinceCode || !this.cityCode || !this.countyCode) return
      const { data } = await queryRegion({
        provinceCode: this.provinceCode,
        cityCode: this.cityCode,
        countyCode: this.countyCode
      })
      this.townsList = data.filter(e => !!e)
    },
    async getVillageList() {
      await this.$nextTick()
      if (!this.provinceCode || !this.cityCode || !this.countyCode || !this.townsCode) return
      const { data } = await queryRegion({
        provinceCode: this.provinceCode,
        cityCode: this.cityCode,
        countyCode: this.countyCode,
        townsCode: this.townsCode
      })
      this.villageList = data.filter(e => !!e)
    },
  }
}
</script>

<style lang="scss" scoped>
.select-address {
  .w-150 {
    width: 150px;
  }

  .w-100 {
    width: 100px;
  }

  .form-content.error {
    border: 1px solid red;
    border-radius: 4px;
  }
}
</style>
